<template>
  <div class="fifth-page">
    <ComTopNum/>
    <div class="center-box">
      <ComNavTab text="激活终端占比"/>
        <div class="inner-box">
          <div class="center-box-left">
            <ComBaseEcharts 
                    echartId="TmsFifhPageapplySumId"
                    :options="getOptionsForAppAllPieRef"
                    :customStyle="{width: '100%', height: '100%'}"/>
            </div>
            <ComBaseEcharts echartId="TmsFifthgetOptionsForRankBarRef"
                            :options="getOptionsForRankBarRef"
                            :customStyle="{width: '100%', height: '90%'}"/>
        </div>
      </div>
    <div class="bottom-box">
        <ComNavTab text="地域应用启动详细统计"/>
        <com-table
            style="z-index: 3"
            scrollHeight="440px"
            :isIndex="false"
            :colorKey="['percentageForPast30Days','percentageForPast7Days','percentageForYesterday']"
            :listData="appStartList"
            :hederTextArray="[
                { title: '终端累计', width: '20%' },
                { title: '累计激活量', width: '20%' },
                { title: '近30天开机率', width: '20%' },
                { title: '近7天开机率', width: '20%' },
                { title: '昨天开机率', width: '20%' },
            ]"
            :tableTextArray="[
                'termType',
                'totalActiveTerms',
                'percentageForPast30Days',
                'percentageForPast7Days',
                'percentageForYesterday'
            ]"
            ></com-table>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForRankBar, getOptionsForAppAllPie } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComTopNum from '@/views/tms/components/ComTopNum.vue'
  import { getTmsType } from '@/api/tms/tms.js'
  import { getToday} from '@/utils/func/util'
  
  //tms激活终端类型占比
  const getOptionsForAppAllPieRef = ref(getOptionsForAppAllPie([]))
  const getOptionsForRankBarRef = ref(getOptionsForRankBar([]))

  //应用启动
  const appStartList = ref([])

  onMounted(() => {
    getTmsType({statDate: getToday()}).then(res => {
      const { data } = res
      if(data.length > 0){
        const activeSum = data.map(v=>({
          value: v.totalActiveTerms,
          name: v.termType
      }))
       getOptionsForAppAllPieRef.value = getOptionsForAppAllPie(activeSum)
       const xData = data.map(v => v.termType)
       const yData = data.map(v => v.totalActiveTerms)
       getOptionsForRankBarRef.value = getOptionsForRankBar(xData, yData, [])

      const tabData = data.map(v => ({
        ...v,
        totalActiveTerms: v.totalActiveTerms.toLocaleString()
      }))
       appStartList.value = tabData
      }
    })   
  })
</script>
<style lang="scss" scoped>
.fifth-page {
  padding: 0 40px 60px 40px;
  .center-box{
    // display: flex;
    height: 500px;
    // padding-top: 25px;
    // background-image: url('/src/assets/BG2.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    &-left{
      width: 70%;
      padding-top: 50px;
    }
    &-right{
      width: 30%;
      margin-left:20px;
    }
    .inner-box{
      display: flex;
      height: 500px;
    }
  }
  .bottom-box{
    max-height: 500px;
  }
}
</style>
<style lang="scss">
.fifth-page{
  .screan-area{
    height: 260px !important;
  }
}
</style>